import React, { FC, useRef, useState } from "react"
import { Divider } from "antd"

const useRefPage: FC = () => {
  const [startTime, setStartTime] = useState<number | null>(null)
  const [now, setNow] = useState<number | null>(null)
  const intervalRef = useRef<any>(null)

  function handleStart() {
    setStartTime(Date.now())
    setNow(Date.now())

    clearInterval(intervalRef.current)
    intervalRef.current = setInterval(() => {
      setNow(Date.now())
    }, 10)
  }

  function handleStop() {
    clearInterval(intervalRef.current)
  }

  let secondsPassed = 0
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000
  }

  return (
    <>
      <h1>UseRefPage </h1>
      <h2>Time passed: {secondsPassed.toFixed(3)}</h2>
      <h2>intervalRef.current: {intervalRef.current}</h2>
      <h2>reRender {performance.now()}</h2>
      <button onClick={handleStart}>开始</button>
      <button onClick={handleStop}>停止</button>
    </>
  )
}

export default useRefPage
